<template>
  <div class="create">
    <h2>欢迎发布新菜谱，先介绍一下你的大作！</h2>
    <section class="create-introduce">
      <h5>标题</h5>
      <el-input
        class="create-input"
        placeholder="请输入内容"
        v-model="postData.title"
      ></el-input>

      <h5>属性</h5>
      <div>
        <el-select
          v-for="item in property"
          :key="item.parent_type"
          :placeholder="item.parent_name"
          v-model="postData.property[item.title]"
        >
          <el-option
            v-for="option in item.list"
            :key="option.type"
            :value="option.type"
            :label="option.name"
          >
          </el-option>
        </el-select>
      </div>

      <h5>菜谱分类</h5>
      <div>
        <el-select placeholder="请选择菜谱分类" v-model="postData.classify">
          <el-option-group
            v-for="item in classify"
            :key="item.parent_type"
            :label="item.parent_name"
          >
            <el-option
              v-for="option in item.list"
              :key="option.type"
              :value="option.type"
              :label="option.name"
            />
          </el-option-group>
        </el-select>
      </div>

      <h5>成品图(328*440)</h5>
      <div class="upload-img-box clearfix">
        <div class="upload-img">
          <upload-img
            action="/api/upload?type=product"
            :url="postData.product_pic_url"
            @imgUploadedUrl="
              (res) => {
                this.postData.product_pic_url = res.imgUrl;
              }
            "
          />
        </div>
        <el-input
          class="introduce-text"
          type="textarea"
          :rows="10"
          placeholder="简单介绍下这道菜吧~"
          v-model="postData.product_story"
        />
      </div>
    </section>

    <h2>记录所有原材料</h2>
    <section class="create-introduce">
      <h5>主料</h5>
      <!-- <stuff :material="postData.raw_material.main_material" @add="" @remove="" /> -->
      <!-- 组件：采用双向绑定；=》绑定value + 发布input事件 -->
      <stuff v-model="postData.raw_material.main_material" />
      <h5>辅料</h5>
      <stuff v-model="postData.raw_material.accessories_material" />
    </section>

    <h2>开始写步骤啦！能否简单易学就看你怎么写啦！</h2>
    <section class="create-introduce clearfix">
      <step
        v-for="(item, index) in postData.steps"
        :key="item.customId"
        :num="index + 1"
        v-model="postData.steps[index]"
        :length="postData.steps.length"
        @removeStep="removeStep"
      />
      <el-button
        class="eaeaea add-step-button"
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="addStep"
      >
        增加一步
      </el-button>

      <h5>烹饪小技巧</h5>
      <el-input
        class="introduce-text"
        type="textarea"
        :rows="8"
        placeholder="分享下你做这道菜的过程中的心得和小技巧吧！"
        v-model="postData.skill"
      ></el-input>
    </section>

    <el-button
      class="send"
      type="primary"
      size="medium"
      :icon="icon"
      @click="submit"
    >
      搞定，提交审核
    </el-button>
  </div>
</template>

<script>
import UploadImg from "@/components/upload-img";
import Stuff from "./stuff";
import Step from "./addStep";

import { getProperty, getClassify, publishRecipe } from "@/service";

export default {
  name: "createRecipe",

  components: {
    UploadImg,
    Stuff,
    Step,
  },

  async mounted() {
    this.property = (await getProperty()).data;
    this.postData.property = this.property.reduce((o, item) => {
      o[item.title] = "";
      return o;
    }, {});
    // console.log(this.postData.property);

    this.classify = (await getClassify()).data;
    // console.log(this.classify);
  },

  methods: {
    addStep() {
      this.postData.steps.push({
        img_url: "",
        describe: "",
        customId: Date.now(),
      });
    },

    removeStep(index) {
      this.postData.steps.splice(index - 1, 1);
    },

    submit() {
      this.icon = "el-icon-loading";
      publishRecipe({
        ...this.postData,
        steps: this.postData.steps.map((item) => ({
          img_url: item.img_url,
          describe: item.describe,
        })),
      }).then((res) => {
        if (res.code === 0) {
          this.$message({
            message: res.mes,
            type: "success",
          });

          this.$router.push({
            name: "space",
          });
        }
      });
    },
  },

  data() {
    return {
      /* 需要向后端传递的数据 */
      postData: {
        title: "",
        property: {
          /*  craft: 0,
          people: 0, */
        },
        classify: "",
        product_pic_url:
          "https://s1.c.meishij.net/n/images/upload_big_img.png?=1561906961", // 成品图
        product_story: "", // 成品图描述

        raw_material: {
          main_material: [{ name: "", specs: "" }],
          accessories_material: [{ name: "", specs: "" }],
        },
        steps: [{ img_url: "", describe: "", customId: Date.now() }],
        skill: "",
      },

      /* 接口请求到的数据 */
      property: [],
      classify: [],
      icon: "",
    };
  },
};
</script>

<style>
.create-introduce {
  background-color: #fff;
  padding: 20px;
}
.create-introduce .add-step-button {
  margin-left: 100px;
}
.create {
  width: 100%;
}
.create h2 {
  text-align: center;
  margin: 20px 0;
}
.create .send {
  height: 70px;
  width: 220px;
  background-color: #ff3232;
  color: #fff;
  border: none;
  margin: 20px auto;
  display: block;
}
.create h5 {
  margin: 20px 0;
}
.create-input input {
  width: 446px;
  line-height: 22px;
}
.upload-img-box .upload-img,
.introduce-text {
  float: left;
}
.upload-img-box .el-textarea {
  width: 60%;
  margin-left: 10px;
}
</style>